<template>
  <div class="indexRecommendTitleControl">
    <div class="control-section">
      <div class="control-header">
        <span>首页推荐</span>
      </div>
      <div class="control-body">
        <titleControl
          :params="params"
          :initText="'副标题'"
          :title="'副标题'"
        ></titleControl>
        <fontControl
          :fontData.sync="params.css"
          @resetFontCss="resetFontCss"
          :showAlign="false"
        ></fontControl>
      </div>
    </div>
  </div>
</template>

<script>
import titleControl from "@/components/DiyNew/diy/baseControl/titleControl/index.vue";
import fontControl from "@/components/DiyNew/diy/baseControl/fontControl/index.vue";
export default {
  name: "indexRecommendSubtitleControl",
  components: {
    titleControl,
    fontControl,
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      fontInit: {
        color: "#000000",
        fontNum: "12",
        fontSize: "",
        fontStyle: "normal", // normal  italic斜体
        fontWeight: "normal", // normal bold加粗
        textDecoration: "inherit",
      },
    };
  },
  methods: {
    resetFontCss() {
        this.params.css = {...this.fontInit}
    },
  },
};
</script>

<style lang="scss" scoped>
.indexRecommendTitleControl {
  height: calc(100vh - 54px);
  padding-bottom: 20px;
  ::-webkit-scrollbar {
    height: 0 !important;
    width: 0px !important;
  }
}
.control-section {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
  position: relative;
  .control-header {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    span:first-child {
      font-weight: 600;
      color: #000000;
    }
  }
  .control-body {
    flex: auto;
    height: 0;
    overflow: auto;
    width: 228px;
    margin: 0 auto;
    .control-item {
      width: 100%;
      .control-title {
        padding: 24px 0 14px 0;
        font-size: 12px;
        color: #000000;
        text-align: left;
      }
      .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .reset {
        font-size: 12px;
        color: #9e9e9e;
        cursor: pointer;
      }
      .control-content {
        .example-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .example-item {
            width: 70px;
            height: 38px;
            background: #f6f7f9;
            border-radius: 4px;
            margin-right: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img {
              width: 42px;
              height: 18px;
            }
          }
          .example-item:last-child {
            margin-right: 0;
          }
          .active {
            border: 2px solid #1890fc;
          }
        }
        .border-select,
        .fixed-top-select {
          width: 100%;
          height: 100%;
          ::v-deep .ant-select-selection--single {
            height: 100%;
            border: 0 none;
            background: #f2f2f2;
          }
          ::v-deep .ant-select-selection__rendered {
            line-height: 40px;
          }
        }
        .keyword-input {
          width: 228px;
          height: 40px;
          background: #f6f7f9;
          border-radius: 4px;
          input {
            height: 100%;
            background-color: #f6f7f9;
            border: 0 none;
          }
        }
      }
    }
  }
}
</style>